<template>
  <div class="detail">
    <PublicHead></PublicHead>
    <div class="box" v-for="(item, index) in detailList" :key="index">
      <div class="banner">
        <div class="content">
          <div class="serve">
            {{ item.source }}
          </div>
          <div>
            {{ item.title }}
          </div>

          <p>
            来源：<span>{{ item.source }}</span> &emsp;浏览次数：{{ item.viewNum }} &emsp;发布时间：{{ item.gmtCreate }}
          </p>
        </div>
      </div>
      <div class="detailBox">
        <div class="detailTitle">
          <p> {{ item.title }}</p>
          <p>
            来源：<span>{{ item.source }}</span>&emsp;浏览次数：{{ item.viewNum }} &emsp;发布时间：{{ item.gmtCreate }}
          </p>
        </div>
        <div class="neirong">
          <div class="decstion ql-editor" v-html="item.content">
          </div>
          <!-- <VueEditor v-model="item.content"></VueEditor> -->
        </div>
      </div>
    </div>
    <PublicFoot></PublicFoot>
  </div>
</template>

<script>
import PublicHead from '../components/PublicHead.vue'
import PublicFoot from '../components/PublicFoot.vue'
import { gonggao_detail, upload_file } from '@/api/api';
import { VueEditor } from 'vue2-editor';
export default {
  data() {
    return {
      detailId: '',
      detailList: [],
      url: '',
      fileId: '',
    }
  },
  methods: {
    async getdata() {
      this.detailId = this.$store.state.detailId, '详情页id';
      await gonggao_detail({ id: this.detailId }).then((res) => {
        console.log(res);
        if (res.data.state == '20000') {
          this.fileId = res.data.data.fileId;
          console.log(this.fileId);
          this.detailList = [res.data.data].map((item) => ({
            ...item,
            gmtCreate: new Date(item.gmtCreate).toISOString().slice(0, 10),
          }));
          this.imgRender(); // 调用 imgRender 函数
        }
      });
    },

    // 图片渲染
    imgRender() {
      upload_file({ fileId: this.fileId }).then((res) => {
        this.url = window.URL.createObjectURL(
          new Blob([res.data], { type: 'image/*' })
        );
      });
    },
    renderHtml(html) {
      // 可以进行一些处理或转换，以适应你的富文本内容显示需求
      return html;
    }
  },
  mounted() {
    this.getdata()
    this.imgRender()
  },
  components: {
    PublicHead,
    PublicFoot,
    VueEditor

  }
}
</script>

<style scoped lang="scss">
@import url('../../src/assets/css/quill.core.css');
.banner {
  width: 100%;
  height: 340px;
  background: url('../assets/img/gonggao/图层\ 182.png');
  display: flex;
  justify-content: center;

  .content {
    width: 1220px;
    height: 100%;
    margin-top: 60px;
    div:nth-of-type(2) {
      width: 100%;
      height: 50px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 55px;
      line-height: 80px;
    }

    div:nth-of-type(3) {
      width: 960px;
      height: 80px;
      font-size: 30px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 55px;
      line-height: 80px;
    }

    p {
      width: 100%;
      height: 17px;
      font-size: 16px;
      font-family: Microsoft YaHei;
      font-weight: bold;
      color: #AED5F0;
      line-height: 17px;
      margin: 30px 0px;
      
    }

    .serve {
      width: 10%;
      height: 25px;
      background: url('../assets/img/gonggao/形状\ 1.png') no-repeat;
      background-size: 100% 100%;
      color: white;
      text-align: center;
      line-height: 25px;
      margin-top: 55px;
    }
  }
}

.detailBox {
  box-sizing: border-box;
  padding: 50px;
  width: 1220px;
  min-height: 1662px;
  height: 100%;
  
  background: #FFFFFF;
  margin: 50px auto;
  display: flex;
  flex-direction: column;
  align-items: center;

  .detailTitle {
    width: 812px;
    height: 65px;
    font-size: 25px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    color: #414141;
    line-height: 40px;
    text-align: center;
    margin: 100px;

    p:nth-of-type(2) {
      font-size: 14px;
    }
  }

  .neirong {
    // padding: 0 200px;
    width:100%;
    height: 100%;

    // text-align: center;
    .contents {
      // background-color: red;
      width: 100%;
      height: 100%;
      ::v-deep p{
        // display: flex;
        // justify-content: center;
        // flex-direction: column;
        // align-items: center;
        img{
          // width: 400px;
          // height: 400px;
          max-width: 100%;
          max-height: 100%;
        }
      }
    }
  }
}</style>